<template>
  <div class="">
    <el-dialog :title="title" :visible.sync="dialogBoole" width="500px">
      <el-form :model="form" ref="refForm" label-width="90px" class="demo-form-inline">
        <el-form-item label="类型" prop="invoiceType">
          <el-radio-group v-model="form.invoiceType" v-if="isBool">
            <el-radio label="1">个人开票</el-radio>
            <el-radio label="2">企业开票</el-radio>
          </el-radio-group>
          <span v-else>
            <span v-if="form.invoiceType === '1'">个人开票</span>
            <span v-if="form.invoiceType === '2'">企业开票</span>
          </span>
        </el-form-item>

        <el-form-item label="开票金额" prop="invoiceAmount" :rules="!isBool? []: rules.invoiceAmount">
          <el-input v-if="isBool" v-thousand v-model="form.invoiceAmount" @change="handleChange"
                    placeholder="请输入开票金额"/>
          <span v-else>{{ format_thousand(form.invoiceAmount) }}</span>
        </el-form-item>

        <el-form-item label="发票类型:" prop="invoiceCategory" :rules="!isBool? []: rules.invoiceCategory">
          <el-select v-model="form.invoiceCategory" v-if="isBool" style="width: 100%" placeholder="请选择发票类型">
            <el-option v-for="item in dict.type.invoice_type" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>

          <span v-else>  {{ selectDictLabel(dict.type.invoice_type, form.invoiceCategory) }}</span>
        </el-form-item>

        <el-form-item label="客户名称:" prop="customerName" :rules="!isBool? []: rules.customerName">
          <el-input v-if="isBool" v-model="form.customerName" placeholder="请输入客户名称"/>
          <span v-else>{{ form.customerName }}</span>
        </el-form-item>

        <el-form-item label="开户银行:" prop="bankName" :rules="!isBool? []: rules.bankName">
          <el-input v-if="isBool" v-model="form.bankName" placeholder="请输入开户银行"/>
          <span v-else>{{ form.bankName }}</span>
        </el-form-item>

        <el-form-item label="账户:" prop="bankNumber" :rules="!isBool? []: rules.bankNumber">
          <el-input v-if="isBool" v-model="form.bankNumber" placeholder="请输入账户"/>
          <span v-else>{{ form.bankNumber }}</span>
        </el-form-item>

        <el-form-item label="电子邮箱:" prop="email" :rules="!isBool? []: rules.email">
          <el-input v-if="isBool" v-model="form.email" placeholder="请输电子邮箱:"/>
          <span v-else>{{ form.email }}</span>
        </el-form-item>

        <el-form-item label="地址:" prop="address">
          <el-input v-if="isBool" v-model="form.address" placeholder="请输入地址"/>
          <span v-else>{{ form.address }}</span>
        </el-form-item>

        <el-form-item label="联系电话:" prop="phone" :rules="!isBool? []: rules.phone">
          <el-input v-if="isBool" v-model="form.phone" placeholder="请输入联系电话"/>
          <span v-else>{{ form.phone }}</span>
        </el-form-item>

        <el-form-item label="发票附件:" prop="invoiceOss" v-if="title === '开票'"
                      :rules="rules.invoiceOss">
          <image-common v-model="form.invoiceOss" :limit="20" :upType="2"/>
        </el-form-item>

        <el-form-item label="发票附件:" prop="invoiceOss" v-if="title === '查看发票'">
          <image-common v-model="form.invoiceOss" :disabled="true"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClear">{{ ['申请开票', '开票',].includes(title) ? '取 消' : '关 闭' }}</el-button>
        <el-button type="primary" @click="handleSubmit" v-if="['申请开票','开票',].includes(title)">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import {applyInvoice, invoicing, getInvoicing} from '@/api/vehicleDisposal/purchaseHandle.js'

export default {
  name: "invoice", //开票
  dicts: ["invoice_type"],
  computed: {
    required() {
      let a = this.title;
      return a;
    },
  },
  watch: {},
  data() {
    let validatePhone = (rule, value, callback) => {
      console.log(value, "-=-=-==")
      const phoneReg = /^1[3-9]\d{9}$/;
      if (value === '' || value === undefined || value === null) {
        callback();
      } else {
        if (phoneReg.test(value)) {
          callback();
        } else {
          callback(new Error('请输入有效的手机号码'));
        }
      }

    };

    let validateEmail = (rule, value, callback) => {
      const emailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (value === '' || value === undefined || value === null) {
        callback();
      } else {
        if (emailReg.test(value)) {
          return callback();
        } else {
          callback(new Error('请输入有效的邮箱地址'));
        }
      }
    }
    return {
      dialogBoole: false,
      form: {
        invoiceType: '2',
        invoiceAmount: '',
        invoiceCategory: '',
        customerName: '',
        bankName: '',
        bankNumber: '',
        email: '',
        address: '',
        phone: '',
        invoiceOss: '',
        leasePurchaseTransferId: null
      },
      title: "",
      isBool: false,
      rules: {
        invoiceAmount: [
          {required: true, message: "请输入开票金额", trigger: "blur"},
        ],
        invoiceCategory: [
          {required: true, message: "请选择发票类型", trigger: "change"},
        ],
        customerName: [
          {required: true, message: "请输入客户名称", trigger: "blur"},
        ],
        bankName: [
          {required: true, message: "请输入开户银行", trigger: "blur"},
        ],
        bankNumber: [
          {required: true, message: "请输入银行账户", trigger: "blur"},
        ],
        invoiceOss: [
          {required: true, message: "请上传发票附件", trigger: "blur"},
        ],
        phone: [
          {validator: validatePhone, trigger: 'blur'},
        ],
        email: [
          {validator: validateEmail, trigger: 'blur'},
        ],
      },
      requestUrl: ''
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleOpen(type, row, bool) {
      this.title = type;
      this.isBool = bool;
      this.form.leasePurchaseTransferId = row.leasePurchaseTransferId

      if (type === '申请开票') {
        this.requestUrl = applyInvoice
      }
      if (type === '开票') {
        this.requestUrl = invoicing
        this.handleDetails(row.invoiceId)
      }

      if (type === '查看发票') {
        this.handleDetails(row.invoiceId)
      }

      this.dialogBoole = true;
    },

    handleClear() {
      this.form = {
        invoiceType: '2',
        invoiceAmount: '',
        invoiceCategory: '',
        customerName: '',
        bankName: '',
        bankNumber: '',
        email: '',
        address: '',
        phone: '',
        invoiceOss: undefined,
        leasePurchaseTransferId: null
      }
      this.dialogBoole = false;
    },

    handleChange(val) {
      let reg = /^(\d+\.?\d{0,2}|\.\d{1,2})$/
      if (val && reg.test(val)) {
        this.form.invoiceAmount = val
      } else {
        this.form.invoiceAmount = ''
      }
    },

    async handleSubmit() {
      try {
        const valid = await this.$refs.refForm.validate();
        if (valid) {
          await this.handlePost();
        }
      } catch (error) {
        console.error("表单验证失败或请求出错", error);
      }
    },

    async handlePost() {
      try {
        const res = await this.requestUrl(this.form);
        if (res.code === 200) {
          this.$message.success(`${this.title}成功`);
          this.$emit('reset');
          this.dialogBoole = false;
        }
      } catch (error) {
        console.error("请求失败", error);
        this.$message.error("操作失败，请稍后重试");
      }
    },

    async handleDetails(id) {
      try {
        const res = await getInvoicing(id);
        if (res.code === 200) {
          for (let key in this.form) {
            this.$set(this.form, key, res.data[key])
          }
        }
      } catch (error) {
        console.error("请求失败", error);
      }
    }
  },
};
</script>

<style scoped lang=""></style>


